
<template>
  <div class="tree_main">
    <el-input
      v-model="filterText"
      style="width: 210px"
      placeholder="请输入"
    />
    <el-tree
      style="max-width: 600px"
      class="tree_css"
      ref="treeRef"
      :data="treeList"
      node-key="id"
      highlight-current
      draggable
      :props="defaultProps"
      :filter-node-method="filterNode"
      @check-change="handleCheckClick"
      @node-click="handleNodeClick"

      :allow-drop="allowDrop"
      :allow-drag="allowDrag"
      @node-drag-start="handleDragStart"
      @node-drag-enter="handleDragEnter"
      @node-drag-leave="handleDragLeave"
      @node-drag-over="handleDragOver"
      @node-drag-end="handleDragEnd"
      @node-drop="handleDrop"
    >
      <template #default="{ node }">
          <el-tooltip
            class="box-item"
            effect="dark"
            :content="node.label"
            placement="top-start"
          >
            <span class="custom-tree-node-label common-text-ellipsis"> {{ node.label }}</span>
          </el-tooltip>
      </template>
    </el-tree>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch,defineProps, defineEmits,onMounted } from 'vue'
import { apiGetDeptTree,apiAlterParent } from '@/api/user'
import { ElTree } from 'element-plus'
import { useMessage } from '@/hooks/message'
import type Node from 'element-plus/es/components/tree/src/model/node'
import type { DragEvents } from 'element-plus/es/components/tree/src/model/useDragNode'
import type {
  AllowDropType,
  NodeDropType,
} from 'element-plus/es/components/tree/src/tree.type'

const handleDragStart = (node: Node, ev: DragEvents) => {
  console.log('drag start', node)
}
const handleDragEnter = (
  draggingNode: Node,
  dropNode: Node,
  ev: DragEvents
) => {
  console.log('正在拖的节点:', dropNode.label)
}
const handleDragLeave = (
  draggingNode: Node,
  dropNode: Node,
  ev: DragEvents
) => {
  console.log('tree drag leave:', dropNode.label)
}
const handleDragOver = (draggingNode: Node, dropNode: Node, ev: DragEvents) => {
  console.log('tree drag over:', dropNode.label)
}
const handleDragEnd = (
  draggingNode: Node,
  dropNode: Node,
  dropType: NodeDropType,
  ev: DragEvents
) => {
  console.log('tree drag end:', dropNode && dropNode.label, dropType)
}
const handleDrop = async(
  draggingNode: Node,
  dropNode: Node,
  dropType: NodeDropType,
  ev: DragEvents
) => {
  console.log('最重要的:', draggingNode,dropNode, dropType,ev)
  let par = {
    orgId:draggingNode.data.value,
    parentOrgId:dropNode.data.value
  }
  apiAlterParent(par)
  const {data} = await apiAlterParent()
  console.log(data)
      if(data.success){
        useMessage().success(data.message)
        // getTreeList()
      }
}


const allowDrop = (draggingNode: Node, dropNode: Node, type: AllowDropType) => {
  if (dropNode.data.label === 'Level two 3-1') {
    return type !== 'inner'
  } else {
    return true
  }
}
const allowDrag = (draggingNode: Node) => {
  return !draggingNode.data.label.includes('Level three 3-1-1')
}








const emits = defineEmits(['nodeClick'])
const props = defineProps({
  draggable:{
    type:Boolean, 
    default:true
  },
})
interface Tree {
  [key: string]: any
}

const filterText = ref('')
const treeList = ref([])
const treeRef = ref<InstanceType<typeof ElTree>>()

// const defaultProps = {
//   children:'subNodes',
//     // label: 'payload.orgCname',
//   label: (data) => data.payload.orgCname
// }
const handleCheckClick = (data, checked)=> {
      // let removalList = treeRef.value!.getCheckedKeys()
      // let tempSelectList = [...removalList]
      // console.log(tempSelectList,'tempSelectList')
      // emits('treeChange', tempSelectList)
    }
    //点击某一节点时触发方法
    const handleNodeClick = (data)=>{
      console.log(data,'data')
      emits('nodeClick', data)
    }
    // const filterNode(value, data) {
    //   if (!value) return true
    //   return data.label.includes(value)
    // },

const defaultProps = ref({
      children: 'children',
      label: 'label'
    });
  const transformData = (node) => {
    const newNode = {
      value: node.payload.orgId,
      label: node.payload.orgCname,
      orgEname:node.payload.orgEname,
      children: []
    };

    if (node.subNodes && node.subNodes.length > 0) {
      newNode.children = node.subNodes.map(subNode => transformData(subNode));
    } else {
      delete newNode.children; // 删除空的 children 属性
    }
    return newNode;
  };
  const getTreeList = async() => {
    console.log('调用了')
      const {data} = await apiGetDeptTree()
      if(data.success){
          // dataList.value = data.data.subNodes
          treeList.value = [transformData(data.data)];
      }
  }

watch(filterText, (val) => {
  treeRef.value!.filter(val)
})

const filterNode = (value: string, data: Tree) => {
  console.log(data,'data123456')
  if (!value) return true
  return data.label.includes(value)
}
onMounted(()=>{
  getTreeList()
})
</script>
<style lang="less" scoped>
.tree_main {
  .tree_css {
    margin-top: 15px;
  }
}
</style>
